<template>
  <div class="yuyan">
    <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
      <lang-select id="lang-select" class="right-menu-item hover-effect" />
    </el-tooltip>
  </div>
  <div class="login flexCenter">
    <div class="bounce-animation flexCenter">
      <!-- 左边图片 -->
      <div style="box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;">
        <el-image style="height: 556px; width: 605px; vertical-align: bottom; border-radius: 6px 0 0 6px"
          :src="util.getAssetsFile('login_back.png')" fit="fill"></el-image>
      </div>
      <!-- 右边登录框 -->
      <div class="login-form">
        <!-- 右上角change -->
        <div>
          <el-button type="primary" class="rigTop" plain v-if="type == 1" @click="type = 2">{{ $t('licence.log_APP')
          }}</el-button>
          <el-button type="primary" class="rigTop" plain v-if="type == 2" @click="type = 1">{{ $t('licence.log_LOG')
          }}</el-button>
          <!-- <el-image v-if="type == 1" @click="type = 2" class="imgP" src="../assets/images/code.png" fit="fill"></el-image> -->
          <el-image v-if="type == 1" @click="type = 2" class="imgP" :src="util.getAssetsFile('code.png')"
            fit="fill"></el-image>
          <el-image class="imgP" v-if="type == 2" @click="type = 1" :src="util.getAssetsFile('pass.png')"
            fit="fill"></el-image>
        </div>
        <!-- 密码登录 -->
        <div v-if="type == 1">
          <h2 class="title">{{ $t('licence.loginWell') }}</h2>
          <div class="title_box"></div>
          <el-tabs style="margin-top: 26px" v-model="activeName">
            <el-tab-pane name="dealer">
              <template #label>
                <span class="fontClass">{{ $t('licence.loginType1') }}</span>
              </template>
              <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
                <el-form-item prop="username">
                  <el-input v-model="loginForm.username" type="text" :placeholder="$t('licence.log_shou')">
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="loginForm.password" type="password" :placeholder="$t('licence.log_mi')"
                    @keyup.enter="handleLogin"></el-input>
                </el-form-item>
                <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">{{ $t('licence.log_remember')
                }}</el-checkbox>
                <!-- @click="forget" -->
                <div class="forget" style="float: right">
                  <router-link class="link-type" to="/forgotPassword">{{ $t('licence.log_forget') }}</router-link>
                </div>
                <el-form-item style="width: 100%">
                  <el-button :loading="loading" type="primary" style="height: 50px; width: 100%; border: none"
                    @click.prevent="handleLogin()">
                    <span v-if="!loading">{{ $t('licence.log_login') }}</span>
                    <span v-else>{{ $t('licence.log_logining') }}</span>
                  </el-button>
                  <div style="margin-top: 100px" class="bott flexCenter">
                    <div class="xianB"></div>
                    <div class="guanfang" style="">
                      {{ $t('licence.log_h4') }}
                    </div>
                    <div class="xianB"></div>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane name="individual" lazy>
              <template #label>
                <span class="fontClass">{{ $t('licence.loginType2') }}</span>
              </template>
              <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
                <el-form-item prop="username">
                  <el-input v-model="loginForm.username" type="text" :placeholder="$t('licence.log_shou')">
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="loginForm.password" type="password" :placeholder="$t('licence.log_mi')"
                    @keyup.enter="handleLogin"></el-input>
                </el-form-item>
                <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">{{ $t('licence.log_remember')
                }}</el-checkbox>
                <!-- @click="forget" -->
                <div class="forget" style="float: right">
                  <router-link class="link-type" to="/forgotPassword">{{ $t('licence.log_forget') }}</router-link>
                </div>
                <el-form-item style="width: 100%">
                  <el-button :loading="loading" type="primary" style="height: 50px; width: 100%; border: none"
                    @click.prevent="handleLogin(true)">
                    <span v-if="!loading">{{ $t('licence.log_login') }}</span>
                    <span v-else>{{ $t('licence.log_logining') }}</span>
                  </el-button>
                  <div style="margin-top: 100px" class="bott flexCenter">
                    <div class="xianB"></div>
                    <div class="guanfang" style="">
                      {{ $t('licence.log_h4') }}
                    </div>
                    <div class="xianB"></div>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 下载APP -->
        <div v-if="type == 2" style="margin-top: 90px">
          <h2 class="title">{{ $t('licence.downloadApp') }}</h2>
          <div class="title_box"></div>
          <div class="downloadApp">
            <div class="downloadApp-bg">
              <div class="xian">
                <img class="erweima" :src="util.getAssetsFile('ercode.png')" alt="" />
              </div>
            </div>
          </div>
          <p class="downloadApp-tips">{{ $t('licence.log_sao') }}</p>
        </div>
      </div>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <p class="top">
        <span style="margin-right: 20px">
          <span>{{ $t('licence.log_dianhua') }}：</span> <span @click="callPhoneNumber('4008616700')">4008-616-700</span> / 0551-65176633 / 65655800
        </span>
        <span @click="openEmail('developer@dahsolar.com')">
          <span style="cursor: pointer">{{ $t('licence.log_youxiang') }}：</span> developer@dahsolar.com</span>
      </p>
      <p class="bot">
        <span style="cursor: pointer" @click="goUrl('http://solarunit.dhhome-e.com/')">{{ $t('licence.CompanyName') }}</span>
        <span> | </span>
        <span @click="goUrl('https://beian.miit.gov.cn/#/Integrated/index')" style="cursor: pointer">皖ICP备15001100号-2</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user';
import { useStationStore } from '@/store/modules/station';
import { LoginData } from '@/api/types';
import { to } from 'await-to-js';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import Cookies from 'js-cookie';
import { useI18n } from 'vue-i18n'
import util from '@/utils/util';
import { getstation } from '@/api/login';
const userStore = useUserStore();
const router = useRouter();



const loginForm = ref<LoginData>({
  username: '',
  password: '',
  rememberMe: false,
} as LoginData);

const { t } = useI18n()
const loginRules: ElFormRules = {
  username: [
    {
      required: true,
      trigger: 'blur',
      message: t('licence.mAccount'),
    },
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      message: t('licence.mPass'),
    },
  ],
};

const type = ref(1);//切换登录用户类型
const loading = ref(false);
const activeName = ref('dealer')

const redirect = ref(undefined);
const loginRef = ref<ElFormInstance>();
let powerStation = ref([]);

watch(() => router.currentRoute.value, (newRoute: any) => {
  redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });

const getLoginData = () => {
  const username = Cookies.get('username');
  const password = Cookies.get('password');
  const rememberMe = Cookies.get('rememberMe');
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password as string : "*".repeat(8),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  };
}

const handleLogin = (cookies = true) => {
  loginRef.value?.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      loading.value = true;
      const password = Cookies.get('password');
      const loginInfo = ref<LoginData>({
        username: loginForm.value.username,
        password: (loginForm.value.password == "*".repeat(8)) ? password : encrypt(loginForm.value.password as string),
      } as LoginData);
      // 调用action的登录方法
      let err: any;
      if (activeName.value == 'dealer') {
        localStorage.setItem('userType', '0');
      } else {
        localStorage.setItem('userType', '1');
      }
      [err] = await to(userStore.login(JSON.parse(JSON.stringify(loginInfo.value))));
      if (!err) {
        if (loginForm.value.rememberMe) {
          Cookies.set('username', loginForm.value.username as string, { expires: 30 });
          Cookies.set('password', loginInfo.value.password as string, {
            expires: 30,
          });
          Cookies.set('rememberMe', String(loginForm.value.rememberMe), {
            expires: 30,
          });
        } else {
          Cookies.remove('username');
          Cookies.remove('password');
          Cookies.remove('rememberMe');
        };
        if (activeName.value == 'dealer') {
          localStorage.setItem('individual', '0');
          await router.push({ path: redirect.value || '/index' });
        } else {
          getstationList();
          localStorage.setItem('create', '1');
          localStorage.setItem('individual', '1');
          await router.push({ path: '/dianzhan' }).catch(() => { });
        }
        loading.value = false;
      } else {
        loading.value = false;
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

const getstationList = async () => {
  let res = await getstation();
  powerStation.value = res.data;
  await useStationStore().setPowerInfo(powerStation.value);
};

const goUrl = (src) => {
  window.open(src, '_blank');
};

// 拨打电话
const callPhoneNumber = (phoneNumber:string|number) => {
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
  window.location.href = 'tel:' + phoneNumber;
}

// 打开邮箱
const openEmail = (email:string|number) => {
  window.location.href = 'mailto:' + email;
}
onMounted(() => {
  getLoginData();
});
</script>

<style lang="scss" scoped>
.yuyan {
  position: fixed;
  right: 10%;
  margin-top: 30px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2b2b2b;
  cursor: pointer;
}

.login {
  height: 100%;
  // background-image: url('../assets/images/login-bg.png');
  background-size: cover;
}

.title {
  font-size: 34px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #2b2b2b;
  text-shadow: 0px 4px 16px rgba(0, 19, 54, 0.07);
  margin-top: 10px;
  margin-bottom: 20px;
}

.fontClass {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
}

.downloadApp-bg {
  width: 200px;
  height: 201px;
  background-image: url('../assets/images/code-bg.png');
  background-size: cover;
  margin: 20px auto;
  padding: 10px 0px;

  .xian {
    width: 180px;
    height: 180px;
    border: 1px solid #eeeeee;
    margin: auto;
    padding: 5px;

    .erweima {
      width: 170px;
      height: 170px;
      margin: auto;
      display: block;
    }
  }
}

.downloadApp-tips {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  text-shadow: 0px 4px 16px rgba(0, 19, 54, 0.07);
}

// 标题背景
.title_box {
  position: relative;
  bottom: 30px;
  width: 140px;
  height: 14px;
  background: #305add;
  box-shadow: 0px 4px 16px 0px rgba(0, 19, 54, 0.07);
  border-radius: 2px;
  opacity: 0.16;
}

// 忘记密码样式
.link-type {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 14px;
  text-shadow: 0px 4px 16px rgba(0, 19, 54, 0.07);
}

::v-deep .el-button--primary {
  // width: 358px;
  // height: 50px;
  color: #ffffff !important;
  background-color: #305add;
  border-color: #305add;
}

// 登录框外边盒子
.login-form {
  position: relative;
  box-sizing: border-box;
  border-radius: 0 6px 6px 0;
  background: #ffffff;
  width: 489px;
  height: 558px;
  padding: 25px 25px 5px 55px;

  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  // 下载app 按钮
  .rigTop {
    position: absolute;
    right: 30px;
    top: 60px;
  }

  // 下载app图片
  .imgP {
    position: absolute;
    right: 0;
    top: 0;
    height: 72px;
    width: 72px;
    cursor: pointer;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}

.el-login-footer {
  // background: rgba(242, 247, 255, 0.9);
  height: 100px;
  // line-height: 30px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #000;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;

  .top {
    height: 40px;
    padding-top: 20px;

    img {
      width: 23px;
    }
  }

  .bot {
    border-top: 2px solid #fff;
    background: rgba(48, 90, 221, 0.07);
    height: 60px;
    // height: 2px; background: #fff;line-height: 50px;
  }
}

.login-code-img {
  height: 35px;
}

.bott {
  width: 100%;

  .xianB {
    width: 34px;
    height: 1px;
    background: #c2c6d0;
  }

  .guanfang {
    color: #95989f;
    font-size: 12px;
    padding: 0 15px;
  }
}

::v-deep .el-input--medium .el-input__inner {
  border: none;
  height: 50px !important;
  background-color: #f6f8fc !important;
  border-radius: 4px;
}

/*去掉切换时el-tab-pane底部的蓝色下划线*/
.el-tabs__active-bar {
  background-color: transparent !important;
}

/*去掉tabs底部的下划线*/
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

.bounce-animation {
  height: 100%;
  animation: bounce 1s;
  animation-timing-function: ease-in-out;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-100px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(-50px);
  }

  100% {
    transform: translateY(0);
  }
}</style>
